<template>
	<view class="page">
		<view class="person-list">
			<view class="person-item" v-for="(item, index) in commissionList" :key="index">
				<image class="person-avatar" mode="aspectFill" :src="item.sourceUserAvatar"></image>
				<view class="user-info">
					<view class="top-info">
						<view class="username">
							{{ item.sourceUserName }}
							<text>({{ item.sourceUserPhone }})</text>
						</view>
						<view class="create-time">{{ item.createTime }}</view>
					</view>
					<view class="top-info">
						<view class="phone-num">预约下单: {{item.serviceName}}</view>
						<view class="money">+{{ item.balance }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCommissionDetails
	} from '@/apis/request.js';

	export default {
		data() {
			return {
				commissionList: [],
				pageNo: 1
			};
		},
		methods: {
			getList() {
				getCommissionDetails({
					pageSize: 10,
					pageNo: this.pageNo
				}).then(res => {
					if (this.pageNo == 1) {
						this.commissionList = res.records;
					} else {
						if (this.commissionList.length < res.total) {
							this.commissionList = this.commissionList.concat(res.records);
						} else {
							this.commissionList = thid.commissionList;
						}
					}
				});
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.commissionList = [];
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.pageNo++;
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;

		.person-list {
			background-color: #fff;

			.person-item {
				padding: 30rpx;
				border-bottom: 2rpx solid #ececec;
				display: flex;
				align-items: center;

				.person-avatar {
					margin-right: 20rpx;
					flex-shrink: 0;
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}

				.user-info {
					width: 100%;

					.top-info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.username {
							font-size: 28rpx;

							text {
								margin-left: 6rpx;
								font-size: 22rpx;
								color: #999999;
							}
						}

						.create-time {
							font-size: 22rpx;
							color: #999999;
						}

						.money {
							font-size: 32rpx;
						}
					}

					.phone-num {
						margin-top: 14rpx;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>